<template>
  <div class="user-center-container">
    <Header />
    
    <div class="main-content">
      <div class="user-center-wrapper">
        <el-row :gutter="20">
          <!-- 左侧导航菜单 -->
          <el-col :span="6">
            <el-card class="sidebar-card">
              <el-menu
                class="user-menu"
                :default-active="activeMenu"
                router>
                <el-menu-item index="/user/info">
                  <i class="el-icon-user"></i>
                  <span>个人信息</span>
                </el-menu-item>
                <el-menu-item v-if="currentUser.role == 1" index="/user/address">
                  <i class="el-icon-location"></i>
                  <span>收货地址</span>
                </el-menu-item>
                <el-menu-item v-if="currentUser.role == 1" index="/user/orders">
                  <i class="el-icon-document"></i>
                  <span>我的订单</span>
                </el-menu-item>
              
              </el-menu>
              
              <div class="merchant-entry" v-if="!isMerchant">
                <el-button type="primary" plain @click="applyMerchant">申请成为商家</el-button>
              </div>
              <div class="merchant-entry" v-else>
                <el-button type="primary" @click="goToMerchantCenter">进入商家中心</el-button>
              </div>
            </el-card>
          </el-col>
          
          <!-- 右侧内容区域 -->
          <el-col :span="18">
            <el-card class="content-card">
              <router-view></router-view>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { mapGetters } from 'vuex'

export default {
  name: 'UserCenter',
  components: {
    Header,
    Footer
  },
  computed: {
    ...mapGetters(['currentUser', 'userRole']),
    // 用户名
    userName() {
      return this.currentUser ? this.currentUser.username : '用户'
    },
    // 用户头像
    userAvatar() {
      return this.currentUser && this.currentUser.avatar ? this.currentUser.avatar : ''
    },
    // 是否是商家
    isMerchant() {
      return this.userRole === 2
    },
    // 当前激活的菜单项
    activeMenu() {
      return this.$route.path
    }
  },
  methods: {
    // 申请成为商家
    applyMerchant() {
      this.$router.push('/merchant/apply')
    },
    // 前往商家中心
    goToMerchantCenter() {
      this.$router.push('/merchant')
    }
  }
}
</script>

<style scoped>
.user-center-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.main-content {
  flex: 1;
  padding: 30px 0;
}

.user-center-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sidebar-card {
  border-radius: 8px;
}

.user-info {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.user-avatar {
  margin-bottom: 10px;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
}

.user-menu {
  border-right: none;
  margin-top: 15px;
}

.merchant-entry {
  margin-top: 30px;
  text-align: center;
  padding: 0 20px;
}

.content-card {
  min-height: 500px;
  border-radius: 8px;
}
</style> 